<template>
    <div class="picLook">
        <!-- 顶部 -->
        <app-header>
            <template v-slot:header-tit>
                图说
            </template>
        </app-header>

        <!--导航栏  -->
        <nav>
            <div class="nav-box">
                <router-link to="/home/picLook/pic-new" active-class="active" ><span>最新</span> </router-link>
                <router-link to="/home/picLook/pic-hot" active-class="active" ><span>最热</span> </router-link>
                <router-link to="/home/picLook/pic-mile" active-class="active" ><span>里程碑</span> </router-link>
            </div>
        </nav>

        <!-- 内容 -->
        <section class="contain-box">
            <keep-alive include="PicNew,PicHot,PicMile">
                <router-view/>
            </keep-alive>
        </section>

    </div>
</template>

<script>
import appHeader from "../components/app-header.vue"
export default {
    name:"PicLook",
    components:{
        appHeader
    }
}
</script>

<style lang="scss" scoped>
$bodyCol:rgb(246,246,246);
$navCol:rgb(246,246,246);
$maxWidth:645px;
.nav-box{
    width: 100%;
    height: 40px;
    background-color: $navCol;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d3cfcf;
    a{
        flex-grow: 1;
        text-align: center;
        span{
            display: inline-block;
            height: 100%;
            line-height: 40px;
            font-size: 14px;
            color: rgb(155, 153, 153);
            padding: 0 15px;
        }
        &.active{
            span{
                color: #333;
                border-bottom: 1px solid rgb(119,149,141);
            }
        }
    }
}
.contain-box{
    max-width: $maxWidth;
    position: absolute;
    left: 0;
    top: 86px;
    height: (100%-20);
    overflow-y: scroll;
    background-color: $bodyCol;
    width: 100%;
}

</style>